<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>检查用户名是否存在</title>
</head>
<body>

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <button type="button" id="check-btn">确认</button>
    <div id="result"></div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#username").blur(function(){
            var username = $(this).val();
            $.ajax({
                url: "check_username.php",
                type: "POST",
                data: {username: username},
                success: function(data){
                    if(data == "exists")
                    {
                        $("#result").text("该用户已注册");
                    }
                    else {
                        $("#result").text("用户名可用");
                    }
                }
            });
        });
    });
</script>
</body>
</html>